<template>
    <ConfirmDialog
        :layer="props"
        @update:visible="updateDialogShow"
        @confirm="submit(formRef)" class="custom-dialog">
        <el-form
            class="edit-application-form"
            ref="formRef" 
            :model="form" 
            :rules="rules"
            label-width="100px">
            <el-form-item prop="name" label="导航名称">
                <el-input
                    v-model.trim="form.name"
                    :minlength="1"
                    :maxlength="10"
                    show-word-limit
                    placeholder="请输入导航名称">
                </el-input>
            </el-form-item>
        </el-form>
    </ConfirmDialog>
</template>

<script setup>
import ConfirmDialog from '@/components/dialogComp.vue';
import { ref, reactive, defineProps, defineEmits, computed } from 'vue'
import { useStore } from 'vuex';
import Fn from '@/lib/fn.js';

const store = useStore();

const emit = defineEmits(['update:show', 'update:confirm']);

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '添加一级导航'
    },
    showButton: {
        type: Boolean,
        default: true
    },
    width: {
        type: String,
        default: '600px'
    },
    isCenter: {
        type: Boolean,
        default: false 
    },
    editStatus: {
        type: String,
        default: 'add'
    }
})

const isEdit = computed(() => {
    return props.editStatus === 'edit'
})

const formRef = ref(null)

// 表单数据
const form = reactive({
    name: ''
});

// 表单校验规则
const rules = {
    name: [{ required: true, message: '请输入导航名称', trigger: 'change'}]
}

// 更改弹窗显隐
const updateDialogShow = () => {
    emit('update:show', !props.show);
}

// 提交表单数据
const submit = (formEl) => {
    formEl.validate((valid, fields) => {
        if (valid) {
            emit('update:confirm', form);
            emit('update:show', !props.show);
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style lang="scss" scoped>
</style>